<template>
    <div class="card">
        <div class="card-header">
          <p class="card-header-title" :class="{completed:isok}">
            {{ title }}
          </p>
        </div>
        <footer class="card-footer">
          <a
            href="#"
            class="card-footer-item"
            @click.prevent="Ischange(id)"
          >切换为{{isok ? '未' : '已'}}完成</a>
          <a
            href="#"
            class="card-footer-item"
            @click.prevent="deleteItem(id)"
          >删除</a>
        </footer>
    </div>
</template>

<script>
export default {
  name: 'TodolistItem',
  props:['id','title','isok'],
  methods: {
    Ischange() {
      this.$bus.$emit('toggle',this.id)
    },
    deleteItem() {
      this.$bus.$emit('Delete',this.id)
    }
  }
}
</script>

<style>
  .completed {
      background-color: red;
      text-decoration: line-through;
    }
</style>
